<template>
  <body>
<!--  {{this.numberList}}-->
<!--  {{this.numberList.filter((data)=>{-->
<!--    return data.currentGuest == "0"-->
<!--  })-->
<!--}}-->
  <div class="app-container">
    <div class="big_box">
      <div class="left_box">
        <el-card class="box-card" shadow="hover"  style="" >
          <div class="right_box1" style="float: left">
            <h1 align="center"> 排队中</h1>
            <el-table v-loading="" :data="arr0" @selection-change=""  height="750px"  border style="font-size: 20px">
              <el-table-column label="序号" align="center" prop="id" />
              <el-table-column  label="手牌" align="center" prop="handBrand" />
              <el-table-column  label="时间" align="center" prop="startNumberingTime" />
            </el-table>

<!--            <el-table-->
<!--              :data="numberList"-->
<!--              style="width: 100%">-->
<!--              <el-table-column-->
<!--                prop="id"-->
<!--                label="排号"-->
<!--                width="180">-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="handBrand"-->
<!--                label="手牌"-->
<!--                width="180">-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="startNumberingTime"-->
<!--                label="时间">-->
<!--              </el-table-column>-->
<!--            </el-table>-->


          </div>
          <div class="br" style="float: left"></div>
          <!--          <div class=" button " style="float: left" align="center">
                      <el-button class="button3" type="primary" icon="el-icon-arrow-left"  @click="" ></el-button>
                      <el-button class="button3" type="primary" icon="el-icon-arrow-right"  @click="" ></el-button>
                    </div>-->
          <div class="br" style="float:right"></div>
          <div class="right_box1" style="float:right">
            <h1 align="center"> 服务中</h1>
            <el-table v-loading="" :data="arr1" @selection-change="" height="750px" border  style="font-size: 20px">
              <el-table-column label="序号" align="center" prop="id" />
              <el-table-column  label="手牌" align="center" prop="handBrand" />
              <el-table-column  label="时间" align="center" prop="startNumberingTime" />
            </el-table>

          </div>

        </el-card>
      </div>
      <div class="br"></div>
      <div class="right_box">
        <el-card class="box-card" shadow="hover" >
          <div class="xs">
            <br>
            <br>
            <br>
<!--            <h1 align="center"> 当前服务：</h1>
            <h1 align="center"> 9762牌、9762牌</h1>-->
<!--            <hr>-->
           <h1 align="center" class="el-icon-message-solid" style="margin-left: 100px;" @click="next" >客人呼叫
           </h1>


          </div>
        </el-card>
        <br>
        <el-card class="box-card" shadow="hover" >
          <div  class="xs2" style="align-content: center">
            <br><br><br><br><br>

            <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true" >


              <el-form-item label="手牌号" prop="USERNAME" label-width="150px" style="margin-left: 100px;" >
                <el-input
                  v-model="queryParams.USERNAME"
                  clearable
                  placeholder=""
                />
              </el-form-item>
              <div style="text-align: right;margin-right:90px;">
                <br><br><br><br>
                <el-form-item>
                  <el-button class="button1" type="primary" icon=""  @click="readHand" style="margin-left: 10px;margin-top: -30px;" > <h1>读手牌</h1> </el-button>

                  <el-button class="button1" type="primary" icon="" @click="open1" style="margin-left: 50px;margin-top: 20px;" ><h1>点单</h1></el-button>
                </el-form-item>
                <!--                1231231231231231231231231232131231232121-->
                <!--                12312312312312312312312312321312312321211231231231231231231231231232131231232121-->
<div style="margin-left: -100px!important;">
                <el-dialog

                  title=""
                  :visible.sync="open"
                  width="30%"
                >

                  <el-form  ref="form" :model="form" label-width="100px">
                    <el-form-item label="客人手牌号:">
                      <el-input  v-model="form.handBrand"></el-input>
                    </el-form-item>
                    <el-form-item label="员工编号:">
                      <el-input @change="keychange" v-model="form.id"></el-input>
                    </el-form-item>
                    <el-form-item label="员工姓名:">
                      <el-input disabled="true" v-model="form.entryName"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="活动名称">-->
<!--                      <el-input v-model="form.entryName"></el-input>-->
<!--                    </el-form-item>-->
                  </el-form>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="open = false" style="margin-right: 200px!important;">取 消</el-button>
                    <el-button type="primary" class="tanchuang" @click="submit_ticheng" >确 定</el-button>
                  </span>
                </el-dialog>
</div>
              </div>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>




  </div>
  </body>
</template>

<script>
import { listProject, getProject, delProject, addProject, updateProject } from "@/api/module/kfc/project";
import { listHands, getHands, delHands, addHands, updateHands } from "@/api/module/kfc/hands";
import { listDetails, getDetails, delDetails, addDetails, updateDetails } from "@/api/module/kfc/details";
import { listBaseinfo, getBaseinfo, delBaseinfo, addBaseinfo, updateBaseinfo } from "@/api/module/kfc/baseinfo";
import { listNumber, getNumber, delNumber, addNumber, updateNumber } from "@/api/module/kfc/number";

export default {
  name: "Project",
  dicts: ['yqg_project_category'],
  inject:['reload'],
  data() {
    return {
      CostList:[],
      queryParamsInfoCost:{

      },
      dialogVisible:false,
      arr0:[],
      arr1:[],

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 项目信息表格数据
      projectList: [],
      // 搓澡排号表格数据
      numberList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        handBrand: null,
        startNumberingTime: null,
        currentGuest: null,
        nextGuest: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null
      },
      queryParamsInfo:{

      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    // this.getlistById(1)
    // this.updatelist()
    // this.getListInfo()


    // this.getCostInfo()
setTimeout(()=>{
  this.arr0 = this.numberList.filter((data)=>{
    return data.currentGuest == "0"
  })
  this.arr1 =this.numberList.filter((data)=>{
    return data.currentGuest == "1"
  })

  console.log(this.arr0)
},500)
  },
  methods: {
    open1(){

      window.location.href="http://localhost/yuquangong/2#/yuquangong/2";

},


   /* open1:function() {
      // alert(1)
      console.log()
      this.open = true
    },*/
    /** 查询搓澡排号列表 */
    getList() {
      this.loading = true;
      listNumber(this.queryParams).then(response => {
        this.numberList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    addlist() {
      this.loading = true;

      let date = new Date()
      console.log("sj")
      console.log(date.toLocaleTimeString())

      console.log(this.format(date))

      var queryParams1 = {
          pageNum: 1,
          pageSize: 10,
          handBrand: this.queryParams.USERNAME,
          startNumberingTime:this.format(date),
          //startNumberingTime:date.toLocaleTimeString(),
          currentGuest: null,
          nextGuest: null,
          note1: null,
          note2: null,
          note3: null,
          note4: null,
          note5: null
        }
        console.log(queryParams1)
      addNumber(queryParams1).then(response => {
        // this.numberList = response.rows;
        // this.total = response.total;
        // this.loading = false;
      });
    },
    updatelist() {
      this.loading = true;

      let date = new Date()
      console.log("++++111231231231231")
      console.log(date.toLocaleTimeString())

      console.log(this.format(date))
      var queryParams2 = this.arr0[0]
      // var queryParams2 = {
      //   pageNum: 1,
      //   pageSize: 10,
      //   handBrand: "1111",
      //   startNumberingTime: this.format(date),
      //   currentGuest: null,
      //   nextGuest: null,
      //   note1: "9999999999",
      //   note2: null,
      //   note3: null,
      //   note4: null,
      //   note5: null
      // }
      queryParams2 = {...queryParams2,currentGuest:"1"}
      console.log(queryParams2)
      updateNumber(queryParams2).then(response => {

        // this.numberList = response.rows;
        console.log(1)
        // this.total = response.total;
        // this.loading = false;
      });
      // this.getList();
      console.log(1)
      location.replace("http://localhost/yuquangong/zhuye#/yuquangong/paihao")

    },

    getlistById(id) {
      this.loading = true;

      let date = new Date()
      console.log("++++111231231231231")
      console.log(date.toLocaleTimeString())

      console.log(this.format(date))
      // id = parseInt(id)
      var queryParams3 = {
        // pageNum: 1,
        // pageSize: 10,
        // handBrand: this.queryParams.USERNAME,
        // startNumberingTime: this.format(date),
        // currentGuest: null,
        // nextGuest: null,
        // note1: null,
        // note2: null,
        // note3: null,
        // note4: null,
        // note5: null
        id:id
      }
      console.log(queryParams3)
      getNumber(queryParams3).then(response => {
        // this.numberList = response.rows;
        // this.total = response.total;
        // this.loading = false;
      });

    },
    readHand() {

      this.addlist()

    },
    format(dat){
      //获取年月日，时间
      var year = dat.getFullYear();
      var mon = (dat.getMonth()+1) < 10 ? "0"+(dat.getMonth()+1) : dat.getMonth()+1;
      var data = dat.getDate()  < 10 ? "0"+(dat.getDate()) : dat.getDate();
      var hour = dat.getHours()  < 10 ? "0"+(dat.getHours()) : dat.getHours();
      var min =  dat.getMinutes()  < 10 ? "0"+(dat.getMinutes()) : dat.getMinutes();
      var seon = dat.getSeconds() < 10 ? "0"+(dat.getSeconds()) : dat.getSeconds();

      var newDate = year +"-"+ mon +"-"+ data +" "+ hour +":"+ min +":"+ seon;
      return newDate;
    },
    next(){

      this.updatelist();
      this.reload();
     // this.$router.go(0);
    },
    keychange(){
      alert(1)
    },
    getListInfo() {
      this.loading = true;
      listBaseinfo(this.queryParamsInfo).then(response => {
        this.CostList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getCostInfo() {
      this.loading = true;
      listDetails(this.queryParamsInfoCost).then(response => {
        this.numberList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    updateCostinfo(){
      this.loading = true;

      // let date = new Date()
      // console.log("++++111231231231231")
      // console.log(date.toLocaleTimeString())
      // console.log(this.format(date))

      var queryParamsInfoCost = this.CostList[0]
      // var queryParams2 = {
      //   pageNum: 1,
      //   pageSize: 10,
      //   handBrand: "1111",
      //   startNumberingTime: this.format(date),
      //   currentGuest: null,
      //   nextGuest: null,
      //   note1: "9999999999",
      //   note2: null,
      //   note3: null,
      //   note4: null,
      //   note5: null
      // }
      queryParamsInfoCost = {...queryParamsInfoCost,handBrand:this.form.handBrand}
      console.log(queryParamsInfoCost)
      updateDetails(queryParamsInfoCost).then(response => {
        // this.numberList = response.rows;
        // this.total = response.total;
        // this.loading = false;
      });
      // this.getList();
    },
    submit_ticheng(){
      // this.updateCostinfo()
      this.open = false
      location.replace("http://localhost/yuquangong/2#/yuquangong/2");
      this.updatelist()
    }
  }




}
</script>

<style lang="scss" scoped>
body{
  margin: 0px;
}
/*.zhezhao{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.tankuang{
  position: relative;
  width: 60%;
  height: 70%;
  border-radius: 5px;
  margin: 10% 20%;
  background-color: #00afff;
}
#header{
  height: 40px;
}
#header-right{
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: red;
  color: #fff;
  right: 5px;
  top: 5px;
  text-align: center;
}*/
.big_box{display: flex;}
.br{width: 3%;height: 900px;}
.left_box{width: 70%;height: 900px;}
.xs{height: 350px}
.xs2{height: 650px}
.right_box{width: 30%;height: 900px;}
.right_box1{width: 35%;height: 900px;}
.br2{width: 24%;height: 900px;}
.button{display: flex;align-items: center;justify-content: center;width: 24%;height: 900px;}
.button2{align-items: center;justify-content: center;}
.button1{width: 125px;height: 125px;}
</style>

<!--  <div class="zhezhao" id='zhezhao' style="display: none">
    <div class="tankuang">
      <div id="header">

        <div id="header-right" @click="hidder">x</div>
        <span class="pop_text" id="pop_text01">手牌号</span>
        <el-input v-model="input" placeholder="请输入内容" class="pop_input"></el-input>
        <span class="pop_text">员工编号</span>
        <el-input v-model="input" placeholder="请输入内容" class="pop_input"></el-input>
        <span class="pop_text">员工姓名</span>
        <el-input v-model="input" placeholder="请输入内容" class="pop_input"></el-input>
        <span class="pop_text">员工职务</span>
        <el-input v-model="input" placeholder="请输入内容" class="pop_input"></el-input>
        <el-button type="danger" @click="tiaozhuan">Primary Button</el-button>

        <van-cell @touchstart.native.stop="show = true">弹出默认键盘</van-cell>
&lt;!&ndash;        <van-number-keyboard&ndash;&gt;
&lt;!&ndash;          :show="show"&ndash;&gt;
&lt;!&ndash;          @blur="show = false"&ndash;&gt;
&lt;!&ndash;          @input="onInput"&ndash;&gt;
&lt;!&ndash;          @delete="onDelete"&ndash;&gt;
&lt;!&ndash;        />&ndash;&gt;


      </div>
    </div>
  </div>-->














<style lang="scss" scoped>
.pop_text{
  float: left;
  margin-top: 23px;
  font-size: 25px;
  margin-left:280px;
}
.pop_input{
  margin-top: 20px;
  margin-right: 200px;
  float:right;
  width:400px;

}
.big_box{display: flex;}
.br{width: 3%;height: 900px;}
.left_box{width: 70%;height: 900px;}
.xs{height: 350px}
.xs2{height: 650px}
.right_box{width: 30%;height: 900px;}
.right_box1{width: 35%;height: 900px;}
.br2{width: 24%;height: 900px;}
.button{display: flex;align-items: center;justify-content: center;width: 24%;height: 900px;}
.button2{align-items: center;justify-content: center;}
.button1{width: 125px;height: 75px;}
.button3{width: 125px;height: 75px;font-size: 50px}

.right_box1 {
  width: 420px;
}
.el-table--group::after, .el-table--border::after {
  width: 0!important;
}



</style>
